<template>
    <app-layout>
        <view class="app-level">
            <image src="./../image/level-bg.png" class="bg"></image>

            <view class="list" >
                <view class="main-center">
                    <view ref="name" v-show="shareName" class="now-level">您目前为{{shareName}}</view>
                </view>
                <view class="list-item" v-for="(item, index) in list" :key="index">
                    <view class="item main-between cross-center">
                        <view class="t-omit">{{item.name}}</view>
                        <view class="right" @click="ruleClick(item)">
                            <image class="arrow-right" src="./../image/img-share-level-right.png"></image>
                        </view>
                    </view>
                    <view class="tips" v-if="item.condition_list.length > 1">满足任一条件，即可升级</view>
                    <view>
                        <view v-for="(condition,idx) in item.condition_list" :key="idx" class="apply-item main-between cross-top">
                            <image v-if="condition.key == '下线用户数'" src="./../image/level-people.png"></image>
                            <image v-if="condition.key == '累计佣金'" src="./../image/level-total.png"></image>
                            <image v-if="condition.key == '已提现佣金'" src="./../image/level-money.png"></image>
                            <image v-if="condition.key == '累计消费'" src="./../image/level-ship.png"></image>
                            <image v-if="condition.key == '下线分销商人数'" src="./../image/level-share.png"></image>
                            <view class="box-grow-1">
                                <view>{{condition.key}}<text>（{{condition.now}}{{condition.key == '下线用户数' || condition.key == '下线分销商人数' ? '人' : '元'}}/{{condition.value}}{{condition.key == '下线用户数' || condition.key == '下线分销商人数' ? '人' : '元'}}）</text></view>
                                <view class="progress">
                                    <view :style="{'width':condition.now/condition.value < 1 ? condition.now/condition.value*100 + '%' : '100%','min-width': condition.now > 0 ? '16rpx' : '0'}"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="list.length == 0" class="success">
                    <image class="success-img" src="./../image/level-success.png"></image>
                    <view>恭喜</view>
                    <view class="update">您已成为最高等级{{custom_setting.words.share_name.name ? custom_setting.words.share_name.name : custom_setting.words.share_name.default}}
                    </view>
                </view>
                <view v-if="list.length > 0" class="placeholder"></view>
            </view>
            <view class="level-btn" @click="levelUp" v-if="list.length > 0">
                <view>立即升级</view>
            </view>
            <view class="dialog main-center cross-center"" v-if="dialog.show">
                <view class="content dir-top-nowrap cross-center" :style="dialogBg">
                    <image :src="dialog.status == 1 ? './../image/dialog_success.png' : './../image/dialog_error.png'"></image>
                    <view class="dialog-title">{{dialog.status == 1 ? '恭喜您！' : '很遗憾！'}}<text :class="dialog.status == 1 ? 'success' : 'error'">{{dialog.status == 1 ? '升级成功' : '升级失败'}}</text></view>
                    <view>{{dialog.level_name}}</view>
                    <view class="btn" :class="'btn-' + dialog.status" @click="cancel">我知道了</view>
                </view>
            </view>
            <view class="dialog dir-left-nowrap main-center cross-center" v-if="rule.show">
                <view class="rule dir-top-nowrap cross-center">
                    <image class="box-grow-0 close" @click="rule.show = false" src="/static/image/icon/icon-close.png"></image>
                    <view class="rule-title">等级说明</view>
                    <text class="rule-content">{{rule.content}}</text>
                    <view class="btn" @click="rule.show = false">我知道了</view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        name: "level",
        onLoad(options) { this.$commonLoad.onload();
            this.loadData();
            this.shareName = options.name ? options.name : '';
        },
        data() {
            return {
                shareName: '',
                list: null,
                dialog: {
                    show: false,
                    status: 0,
                    level_name: '',
                    condition_text: '',
                },
                rule: {
                    show: false,
                    content: ''
                }
            };
        },
        computed: {
            ...mapState({
                mallConfig: state => state.mallConfig,
                custom_setting: state => state.mallConfig.share_setting_custom,
            }),
        },
        methods: {
            loadData() {
                this.$showLoading();
                this.$request({
                    url: this.$api.share.level,
                }).then(response => {
                    this.$hideLoading();
                    if (response.code == 0) {
                        this.list = response.data.list;
                    } else {
                        uni.showModal({
                            content: response.msg,
                            showCancel: false
                        })
                    }
                }).catch(response => {
                    this.$hideLoading();
                })
            },
            levelUp() {
                uni.showLoading({
                    title: '升级中...'
                });
                this.$request({
                    url: this.$api.share.level_up,
                }).then(response => {
                    uni.hideLoading();
                    if (response.code == 0) {
                        this.dialog.show = true;
                        this.dialog = {...this.dialog, ...response.data};
                    } else {
                        uni.showModal({
                            content: response.msg,
                            showCancel: false
                        })
                    }
                }).catch(response => {
                    uni.hideLoading();
                })
            },
            cancel() {
                this.dialog.show = false;
                if (this.dialog.status == 1) {
                    this.loadData();
                }
            },
            ruleClick(item) {
                this.rule.show = true;
                this.rule.content = item.rule;
            }
        }
    }
</script>

<style scoped lang="scss">
    .app-level {
        min-height: 100vh;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background: linear-gradient(180deg, #FD5E02 0%, #FA7A02 11%, #F88E02 100%);
        position: relative;
        .bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }


        .list {
            position: relative;
            z-index: 3;
            .placeholder {
                height: calc(152rpx + env(safe-area-inset-bottom));
                height: calc(152rpx + constant(safe-area-inset-bottom));
            }
            .now-level {
                margin-top: 31rpx;
                max-width: 520rpx;
                padding: 14rpx 30rpx;
                background: rgba(158, 45, 23, 0.4);
                border-radius: 56rpx;
                display: inline-block;
                margin-bottom: 30rpx;
                color: #FFFFFF;
                font-size: 32rpx;
            }
            .list-item {
                background-color: #FFFFFF;
                border-radius: 28rpx;
                margin: 0 24rpx 24rpx;
                padding-top: 10rpx;
                overflow: hidden;
                .item {
                    position: relative;
                    background: #ffffff;
                    height: #{88rpx};
                    padding-left: 30rpx;
                    font-size: 34rpx;
                    color: #333333;
                    .right {
                        width: 68rpx;
                        height: 88rpx;
                        padding: 32rpx 30rpx 32rpx 14rpx;
                        flex-shrink: 0;
                        .arrow-right {
                            width: #{24rpx};
                            height: #{24rpx};
                            display: block;
                        }
                    }
                }
                .apply-item {
                    padding: 0 24rpx;
                    margin: 30rpx 0 0;
                    width: 654rpx;
                    height: 106rpx;
                    font-size: 26rpx;
                    color: #333333;
                    width: 100%;
                    image {
                        width: 76rpx;
                        height: 76rpx;
                        margin-right: 14rpx;
                    }
                    >view {
                        height: 100%;
                        border-bottom: 2rpx solid #E5E5E5;
                    }
                    text {
                        font-size: 24rpx;
                        color: #999999;
                    }
                    .progress {
                        margin-top: 18rpx;
                        border-radius: 8rpx;
                        position: relative;
                        width: 100%;
                        height: 16rpx;
                        background: #FFECEC;
                        >view {
                            position: absolute;
                            left: 0;
                            top: 0;
                            border-radius: 8rpx;
                            height: 16rpx;
                            background: #FF4544;
                        }
                    }
                }
                .tips {
                    width: 642rpx;
                    height: 67rpx;
                    line-height: 67rpx;
                    background: rgba(252, 94, 2, 0.1);
                    border-radius: 16rpx;
                    font-size: 26rpx;
                    color: #FC6102;
                    margin: 0 30rpx;
                    text-align: center;
                }
            }
            .success {
                margin: 0 auto;
                width: 690rpx;
                height: 513rpx;
                background: #FFFFFF;
                border-radius: 20rpx;
                font-size: 36rpx;
                color: #333333;
                text-align: center;
                padding-top: 50rpx;
                .update {
                    font-size: 28rpx;
                    color: #999999;
                    margin-top: 6rpx;
                }
                .success-img {
                    display: block;
                    height:#{320rpx};
                    width:#{320rpx};
                    margin: 0 auto #{16rpx};
                }
            }
        }

        .level-btn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: calc(110rpx + env(safe-area-inset-bottom));
            height: calc(110rpx + constant(safe-area-inset-bottom));
            background-color: #FFFFFF;
            padding: 14rpx 24rpx;
            z-index: 100;
            >view {
                width: 702rpx;
                height: 82rpx;
                line-height: 82rpx;
                text-align: center;
                background: #FB6B02;
                border-radius: 41rpx;
                font-size: 34rpx;
                color: #FFFFFF;
            }
        }

        .dialog {
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
            z-index: 102;

            .content {
                margin-top: -20%;
                width: 570rpx;
                height: 531rpx;
                background: #FFFFFF;
                border-radius: 10rpx;
                font-size: 32rpx;
                color: #999999;
                image {
                    margin: 26rpx 120rpx 47rpx 178rpx;
                    display: block;
                    width: 272rpx;
                    height: 162rpx;
                }
                .dialog-title {
                    font-size: 40rpx;
                    color: #333333;
                    margin-bottom: #{20rpx};
                    .success {
                        color: #FF4544;
                    }
                    .error {
                        color: #FFAE1E;
                    }
                }

                .btn {
                    margin-top: #{60rpx};
                    width: #{297rpx};
                    height: #{76rpx};
                    color: #ffffff;
                    border-radius: #{38rpx};
                    text-align: center;
                    line-height: #{76rpx};

                    &.btn-1 {
                        background: #FF4544;
                    }

                    &.btn-0 {
                        background: #FFAE1E;
                    }
                }
            }

            .rule {
                width: #{650rpx};
                background-color: #ffffff;
                border-radius: #{20rpx};
                position: relative;

                .close {
                    position: absolute;
                    right: #{24rpx};
                    top: #{24rpx};
                    width: #{30rpx};
                    height: #{30rpx};
                }

                .rule-title {
                    margin: #{40rpx 0};
                }

                .rule-content {
                    width: #{calc(100% - 64rpx)};
                    margin: #{0 32rpx};
                    padding: #{20rpx 32rpx};
                    height: #{270rpx};
                    overflow-y: auto;
                    border: #{1rpx solid #e2e2e2};
                    border-radius: #{16rpx};
                }
                
                .btn {
                    width: 100%;
                    height: #{90rpx};
                    line-height: #{90rpx};
                    text-align: center;
                    color: $uni-general-color-one;
                    font-size: $uni-font-size-import-two;
                    border-top: #{1rpx solid #e2e2e2};
                    margin-top: #{32rpx};
                }
            }
        }
    }
</style>